<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料">
    </van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <input hidden type="file" id="file" ref="file" @change="hFileChange" />
      <van-cell is-link title="头像" center @click="hClickImage">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="userInfo.photo"
        />
      </van-cell>
      <!-- value： 设置右侧显示的文字 -->
      <van-cell
        is-link
        title="姓名"
        :value="userInfo.name"
        @click="isShowName = true"
      />

      <van-cell
        is-link
        title="性别"
        :value="userInfo.gender === 1 ? '男' : '女'"
        @click="isShowGender = true"
      />

      <van-cell
        is-link
        title="生日"
        :value="userInfo.birthday"
        @click="isShowBirthday = true"
      />
    </van-cell-group>
    <!-- 修改名字  -->
    <van-dialog
      v-model="isShowName"
      title="修改名字"
      show-cancel-button
      @confirm="hSaveName"
    >
      <van-field v-model.trim="newName" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="showGender = false"
      >
      </van-nav-bar>
      <van-cell title="男" @click="hSaveGender(0)" is-link></van-cell>
      <van-cell title="女" @click="hSaveGender(1)" is-link></van-cell>
    </van-popup>
  </div>
</template>

<script>
// import { updateUserPhoto } from '../../api/user'
import { mapState } from 'vuex'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,

      // 当前用户的信息


      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    // 修改名字
    async hSaveName () {
      if (this.newName === '') {
        return
      }
      // 发请求
      // console.log('向后端发请求')
      try {
        await this.$store.dispatch('user/updateUserName', this.newName)
        this.$toast.success('修改成功')
      } catch (err) {
        this.$toast.fail('修改失败')
        console.log(err)
      }
    },
    // 用户点击了头像，相对于点击了input type="file"
    hClickImage () {
      this.$refs.file.click()
      // 找到input：type="file".click()
    },
    // 文件域选中文件之后，自动会传递事件对象给change的回调
    // e.target: input对
    // e.target.files // 选中的文件的集合
    // e.target.files[0] // 选中的第一个文件
    async hFileChange (e) {
      const file = e.target.files[0]
      if (!file) {
        // 用户没有选中
        return
      }

      // 做文件上传
      console.dir(file)
      // ajax文件上传
      // 1. 封装FormData对象
      // 2. append参数
      const fd = new FormData()
      fd.append('photo', file)
      try {
        await this.$store.dispatch('user/updateUserPhoto', fd)
        this.$toast.success('操作成功')
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    },
    // 改性别
    showGender () {
      /// ///
    },
    async hSaveGender (gender) {
      // 发请求
      // console.log('向后端发请求')
      try {
        await this.$store.dispatch('user/uppdateUsergender', gender)
        this.$toast.success('修改成功')
      } catch (err) {
        this.$toast.fail('修改失败')
        console.log(err)
      }
    }
  }
}
</script>
